<!--
 * @Description: 烹饪系列
 * @Author: Zhanghan
 * @Date: 2024-11-19 15:42:28
 * @LastEditTime: 2024-11-26 20:51:31
 * @LastEditors: Zhanghan
-->
<template>
  <div class="foodTwo">
    <ProTabs :tabsList="list" v-model:active="active" />
    <ElCard style="max-width: 880px" v-if="active === 0" >
      <template #header>
        <div class="myHeader">
          <text>水煮肉片</text>
          <text>步骤教学</text>
        </div>
      </template>
      <div class="content">
        <div class="step_group">
          <div class="step_item" v-for="(item, index) in stepList" :key="index">
            <img :src="item.icon" class="step_pic" />
            <div class="step_des">
              <text>{{ item.des[0] }}</text>
              <text>{{ item.des[1] }}</text>
            </div>
          </div>
        </div>
        <div class="step_final">
          <div class="title">效果图</div>
          <img :src="Final" class="final_pic" />
        </div>
      </div>
      <template #footer> 欢迎品尝 </template>
    </ElCard>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ProTabs } from "@/components/ProComponents/index";
import { ElCard } from "element-plus";
import type { TabsList } from "@/components/ProComponents/ProTabs/type";
import Final from "@/assets/dish/final.jpg";
import Step1 from "@/assets/dish/step1.jpg";
import Step2 from "@/assets/dish/step2.jpg";
import Step3 from "@/assets/dish/step3.jpg";
import Step4 from "@/assets/dish/step4.jpg";

const active = ref(0);

const stepList = ref([
  {
    icon: Step1,
    des: ["步骤一", "肉腌入味"],
  },
  {
    icon: Step2,
    des: ["步骤二", "熬至底料"],
  },
  {
    icon: Step3,
    des: ["步骤三", "下入配菜"],
  },
  {
    icon: Step4,
    des: ["步骤四", "下肉捞出"],
  },
]);

const list = ref<TabsList[]>([
  {
    label: "tab1",
    value: 0,
  },
  {
    label: "tab2",
    value: 1,
  },
  {
    label: "tab3",
    value: 2,
  },
]);
</script>

<style scoped lang="less">
.foodTwo {
  img {
    display: block;
  }
  .myHeader {
    width: 100%;
    display: flex;
    font-weight: bold;
    font-size: 18px;
    justify-content: space-between;
  }
  .content {
    .step_group {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .step_item {
        width: 46%;
        height: auto;
        margin-bottom: 20px;
        .step_pic {
          width: 100%;
          height: 240px;
        }
        .step_des {
          width: 100%;
          background: lightgrey;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 20px;
        }
      }
    }
    .step_final {
      width: 100%;
      .title {
        height: 40px;
        line-height: 40px;
        background: lightgrey;
        text-align: center;
        margin-bottom: 4px;
      }
      .final_pic {
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>
